<template>
  <div class="category">
    <div class="category-header">
      <svg
        @click="$router.back()"
        t="1671414539680"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1744"
        width="200"
        height="200"
      >
        <path
          d="M643.84 164.885333a22.122667 22.122667 0 0 0-0.362667-30.72 20.522667 20.522667 0 0 0-29.674666 0.362667L256 512.810667l357.802667 378.304c8.042667 8.533333 21.290667 8.746667 29.674666 0.341333 8.32-8.32 8.533333-22.016 0.384-30.72L316.330667 512.832l327.530666-347.946667z"
          fill="#3D3D3D"
          p-id="1745"
        ></path>
      </svg>
      <span>分类</span>
      <svg
        t="1671414853529"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1436"
        width="200"
        height="200"
      >
        <path
          d="M658.56 557.392L322.536 221.384l45.248-45.256 336.016 336.008z"
          p-id="1437"
          fill="#ffffff"
        ></path>
        <path
          d="M704.088 512.2L364.12 852.16l-45.256-45.248 339.976-339.976z"
          p-id="1438"
          fill="#ffffff"
        ></path>
      </svg>
    </div>
    <div class="category-content">
      <div class="content-left">
        <ul class="list">
          <li
            v-for="item in categoryList"
            :key="item.categoryId"
            @click="toChangeCategory(item.categoryId)"
            :class="{ active: activeId == item.categoryId }"
          >
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <div class="content-right">
        <div class="right" v-for="i in childrenList" :key="i.categoryId">
          <p>{{ i.categoryName }}</p>
          <ul class="goodslist">
            <li
              v-for="item in i.children"
              :key="item.categoryId"
              @click="$router.push(`/goods?categoryId=${item.categoryId}`)"
            >
              <img :src="item.categoryImage" alt="" />
              <span>{{ item.categoryName }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categoryList: [],
      childrenList: [],
      activeId: 0,
    };
  },
  async created() {
    let res = await this.axios.get(
      "https://m-mall.gxptkc.com/v3/goods/front/goods/category/list?categoryId1=233"
    );
    this.categoryList = res.data.data.list;
    this.childrenList = this.categoryList[0].children;
    this.activeId = 233;
  },
  methods: {
    async toChangeCategory(id) {
      this.activeId = id;
      let res = await this.axios.get(
        "https://m-mall.gxptkc.com/v3/goods/front/goods/category/list?categoryId1=" +
          id
      );

      this.childrenList = res.data.data.list.filter((o) => o.categoryId == id);
      this.childrenList = this.childrenList[0].children;
    },
  },
};
</script>

<style lang="scss" scoped>
.category {
  height: 100vh;
  overflow: auto;
  .category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44rem;
    padding: 0 8rem;
    svg {
      width: 27rem;
      height: 27rem;
    }
    span {
      font-size: 16rem;
      font-weight: bold;
    }
  }
  .category-content {
    display: flex;

    .content-left {
      height: calc(100vh - 44rem);
      overflow: auto;
      width: 95rem;
      ul.list {
        width: 100%;
        display: flex;
        flex-direction: column;

        li {
          font-size: 14rem;
          height: 50rem;
          display: flex;
          align-items: center;
          justify-content: center;
          border-left: 2.5rem solid #fff;
          box-sizing: border-box;
          &.active {
            background-color: rgba(0, 0, 0, 0.04);
            border-color: red;
          }
        }
      }
    }
    .content-right {
      width: calc(100vw - 95rem);
      height: calc(100vh - 44rem);
      overflow: auto;
      padding: 0 10rem;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.04);
      .right {
        margin-top: 10rem;
        > p {
          font-size: 14rem;
          color: #333;
          font-weight: bold;
        }
        ul.goodslist {
          width: 100%;
          background-color: #fff;
          margin-top: 10rem;
          display: flex;
          flex-wrap: wrap;
          border-radius: 5rem;
          li {
            width: 33.33%;
            padding: 10rem 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            img {
              width: 66rem;
              height: 66rem;
            }
            span {
              color: #666;
              margin-top: 10rem;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}
</style>